<template>
  <div class="content-box">
      <el-drawer
          size="80%"
          style="text-align: center;font-weight: bold"
          :destroy-on-close="true"
          title="请假申请流转信息"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose">
        <div class="drawerContainer">
          <div class="head">
            <el-card shadow="hover">
              <div class="title">
                <div class="icon"></div>
                <span>请假详情</span>
              </div>
              <div class="containerBox">
                <el-table
                    stripe
                    border
                    size="mini"
                    :default-expand-all="true"
                    :data="tableDataDetail"
                    style="width: 100%">
                  <el-table-column type="expand" fixed>
                    <template slot-scope="props" >
                      <el-form label-position="left"   class="demo-table-expand">
                        <div>
                          <el-form-item label="姓名" style="width: 1116px">
                            <span>{{ props.row.user__name }}</span>
                          </el-form-item>
                        </div>
                        <div>
                          <el-form-item label="请假原因"  style="width: 1116px">
                            <span>{{ props.row.reason }}</span>
                          </el-form-item>
                        </div>
                        <div>
                          <el-form-item label="请假开始时间"  style="width: 1116px">
                            <span>{{ props.row.start_date+'--'+props.row.start_time}}</span>
                          </el-form-item>
                        </div>
                        <div>
                          <el-form-item label="请假结束时间"  style="width: 1116px">
                            <span>{{ props.row.end_date+'--'+props.row.end_time }}</span>
                          </el-form-item>
                        </div>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="id"
                      label="请假申请编号"
                      align="center"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="user__username"
                      label="工号"
                      align="center"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="user__name"
                      label="姓名"
                      align="center"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="user__post__name"
                      label="岗位名称"
                      align="center"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="user__boardingtime"
                      label="入职时间"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="user__persontype__name"
                      label="人员类别"
                      align="center"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="dept__name"
                      label="部门"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="holidaytype__name"
                      label="请假类型"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.holidaytype__name }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      label="请假开始时间"
                      width="130px"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.start_date+' --'+scope.row.start_time}} </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      label="请假结束时间"
                      width="130px"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.end_date+' --'+scope.row.end_time}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="reason"
                      label="请假原因"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="leave_days"
                      label="请假天数"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium" type="success">{{ scope.row.leave_days }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="status"
                      label="状态"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <span :style="scope.row.status === true ? 'color:green':'color:red'">{{scope.row.status ===true ? '有效':'无效'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="link"
                      align="center"
                      label="环节"
                      width="100px"
                  >
                    <template slot-scope="scope">
                      <span>{{link(scope.row.link)}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="title">
                <div class="icon"></div>
                <span>销假材料</span>
              </div>
              <div class="containerBox">
                <div v-for="(item,index) in imageList" :key="index" class="itemBox">
                  <el-image
                      style="width: 200px; height: 200px"
                      fit="contain"
                      :src="base+'/tyjq/api/media/'+item.image"
                      :preview-src-list="srcList"
                  >
                  </el-image>
                </div>
              </div>
              <div class="title">
                <div class="icon"></div>
                <span>流转记录</span>
              </div>
              <div class="containerBox">
                <el-table
                    stripe
                    max-height="1500px"
                    border
                    size="mini"
                    :data="data_order"
                    style="width: 100%"
                >
                  <el-table-column
                      prop="create_date"
                      fixed
                      label="申请到达时间"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="end_date"
                      label="申请处理时间"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="link"
                      label="环节"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span :style="{ color: classObjectProcedure(scope.row.link)}"
                      >
                        {{transformProcedure(scope.row.link)}}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="link_status"
                      label="完成情况"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <span :style="{ color: scope.row.link_status ===true?'green':'red'}"
                      >
                        {{scope.row.link_status ===true?'已完成':'未完成'}}
                    </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="handler__name"
                      label="处理人"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.handler__name }}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="desc"
                      label="处理意见"
                      align="center"
                      :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="result"
                      label="处理结果"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <span :style="{ color: scope.row.result ===true?'green':'red'}"
                      >
                        {{scope.row.result ===true?'同意':(scope.row.result ===null?'':'驳回')}}
                    </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="status"
                      label="申请状态"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <span :style="scope.row.status === true ? 'color:green':'color:red'">{{scope.row.status ===true ? '有效':'无效'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="operation"
                      label="操作"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <el-tag
                          v-if="scope.row.link_status === true"
                          effect="dark"
                          size="medium"
                          icon="el-icon-check"
                          >√ 已完成</el-tag>
                      <el-button
                          size="mini"
                          type="info"
                          icon="el-icon-edit"
                          v-if="scope.row.link_status === false"
                          @click="check(scope.row)">审批</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </div>
      </el-drawer>
    <el-dialog title="审批意见"
               width="30%"
               :before-close="handleDialogClose"
               :visible.sync="dialogFormVisible"
    >
      <el-form size="mini" ref="form" :rules="rules" :model="form" :label-width="formLabelWidth">
        <el-form-item label="意见" prop="code">
          <el-select v-model="form.code" placeholder="是否同意">
            <el-option v-for="item in List" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入备注"
              v-model="form.desc">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">立即审批</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <el-drawer
        size="80%"
        style="font-weight: bold"
        :destroy-on-close="true"
        title="销假意见"
        :visible.sync="drawerSmall"
        :direction="direction"
        :before-close="handleCloseSmall"
    >
      <el-form size="mini" ref="formSmall" :rules="rulesSmall" :model="formSmall" :label-width="formLabelWidthSmall">
        <el-form-item label="意见" prop="code">
          <el-select v-model="formSmall.code" placeholder="是否同意">
            <el-option v-for="item in List" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假类型" prop="holidaytype_name">
          <el-select v-model="formSmall.holidaytype_name" placeholder="请选择请假类型">
            <el-option v-for="item in holidayTypeList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销假说明" prop="description">
          <el-input
              style="width: 90%"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="示例：提前请假***天，实际请假***天"
              v-model="formSmall.description">
          </el-input>
        </el-form-item>
        <el-form-item label="实际请假时间" prop="leavetimes">
          <el-table
              stripe
              highlight-current-row
              border
              ref="leavetimes"
              :data="formSmall.leavetimes"
              style="width: 90%"
              max-height="275">
            <el-table-column
                fixed
                type="index"
                label="序号"
                align="center"
                width="50"
            >
            </el-table-column>
            <el-table-column
                label="开始日期"
                align="center"
                width="200">
              <template slot-scope="scope">
                <el-date-picker
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    v-model="scope.row.start_date"
                    align="center"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
                label="开始时间"
                align="center"
                width="200"
            >
              <template slot-scope="scope">
                <el-select placeholder="选择时间" v-model="scope.row.start_time" style="width: 100%;">
                  <el-option v-for="item in typeTime" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
                label="结束日期"
                align="center"
                width="200">
              <template slot-scope="scope">
                <el-date-picker
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    v-model="scope.row.end_date"
                    align="center"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
                label="结束时间"
                width="200"
                align="center"
            >
              <template slot-scope="scope">
                <el-select placeholder="选择时间" v-model="scope.row.end_time" style="width: 100%;">
                  <el-option v-for="item in typeTime" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="200"
            >
              <template slot-scope="scope">
                <el-button
                    @click.native.prevent="addRow(scope.$index, formSmall.leavetimes)"
                    icon="el-icon-circle-plus-outline"
                    type="primary"
                    size="mini">
                  添加
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    v-if="scope.$index !== 0"
                    @click="handleDeleteRow(scope.$index,formSmall.leavetimes)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
              style="width: 90%"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入备注"
              v-model="formSmall.desc">
          </el-input>
        </el-form-item>
        <el-form-item label="销假材料" prop="images">
          <el-upload
              v-model="imgs"
              action=""
              ref="uploadImg"
              list-type="picture-card"
              v-loading="uploading"
              :auto-upload="false"
              :file-list="fileList"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handleFileChange"
              :before-remove="beforeRemove"
              :class="{disabled:uploadDisabled}"
              :limit="3"
              :on-exceed="handleExceed"
          >
              <span :class="{disabled:uploadDisabled}">
                <i  class="el-icon-plus"></i>
              </span>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，</div>
            <div slot="tip" class="el-upload__tip">且单张不超过2MB</div>
          </el-upload>
          <el-dialog :visible.sync="dialogImgVisible">
            <img width="100%" :src="dialogImageUrl" alt="图片未找到">
          </el-dialog>
        </el-form-item>
       <el-form-item>
            <el-button type="primary" :loading="loading" @click="onSubmit">立即审批</el-button>
            <el-button @click="cancelNew">取消</el-button>
       </el-form-item>
      </el-form>
    </el-drawer>
    <div class="body">
      <el-table
          :data="tableData"
          size="mini"
          stripe
          style="width: 100%"
          height="90%"
          highlight-current-row
          @current-change="handleCurrentChange"
          :default-sort = "{prop: 'id', order: 'descending'}"
      >
        <el-table-column
            fixed
            align="center"
            prop="id"
            sortable
            label="请假单号"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__username"
            label="工号"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__name"
            label="姓名"
        >
          <template slot-scope="scope">
            <!--          <span style="font-weight: bold;font-family:'Microsoft YaHei';color: #333333">{{scope.row.user__name}}</span>-->
            <el-popover trigger="hover" placement="top">
              <p>部门: {{ scope.row.dept__name }}</p>
              <p>入职时间: {{scope.row.user__boardingtime ===null ? '暂无数据':scope.row.user__boardingtime}}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.user__name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__post__name"
            label="角色"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__persontype__name"
            label="员工属性"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="dept__name"
            label="部门"
        >
          <template slot-scope="scope">
            <el-tag size="mini" effect="dark" style="background-color: #1890ff">{{scope.row.dept__name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="holidaytype__name"
            label="休假类型"
        >
          <template slot-scope="scope">
            <el-tag size="mini" :type="typeSelect(scope.row.holidaytype__name)" effect="plain">{{scope.row.holidaytype__name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="请假开始时间"
            width="130px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.start_date+' --'+scope.row.start_time}} </span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="请假结束时间"
            width="130px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.end_date+' --'+scope.row.end_time}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="reason"
            label="请假原因"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="leave_days"
            label="请假天数"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="scope.row.status === true ? 'color:green':'color:red'">{{scope.row.status ===true ? '有效':'无效'}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="link"
            align="center"
            label="环节"
            width="100px"
        >
          <template slot-scope="scope">
            <el-tag style="background-color: white;border: #1890ff 1px dotted">
                      <span :style="{ color: classObjectProcedure(scope.row.link)}"
                      >
                        {{link(scope.row.link)}}
                      </span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="200px">
          <template slot-scope="scope">
<!--            <el-button-->
<!--                size="mini"-->
<!--                icon="el-icon-more"-->
<!--                type="success"-->
<!--                @click="detail(scope.row.id)">详情</el-button>-->
            <el-button
                size="mini"
                type="info"
                icon="el-icon-edit"
                @click="detail(scope.row.id)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePagination"
            :current-page.sync="pagination.currentPage"
            :page-size="pagination.pageSize"
            :page-sizes="pagination.pageSizes"
            background
            layout="total,sizes ,prev, pager, next,jumper"
            :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {holidayInfo, holidayType} from "@/utils/holiday";
import {auditOrder, todoList} from "@/utils/order";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Check',
  data() {
    return {
      base:'http://134.68.156.116:28881',
      loading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      imgs:'',
      uploading:false,
      uploadDisabled:false,
      dialogImgVisible:false,
      dialogImageUrl:'',
      fileList:[],
      typeTime:[
        '上午',
        '下午'
      ],
      imageList:[],
      List:[
          {
            label:'同意',
            value:1
          },
          {
            label:'驳回',
            value:0
          }
        ],
      srcList:[],
      data_order:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      formLabelWidthSmall:'120px',
      pagination:{
        currentPage:1,
        pageSizes:[5,10,15,20,50,100],
        pageSize:10,
        total:100
      },
      currentRow: null,
      drawer: false,
      drawerSmall:false,
      direction: 'rtl',
      tableDataDetail:[],
      form:{
        link:'',
        order_id:'',
        code:'',
        desc:''
      },
      rules:{
         code:[
           {
             required:true,message:'请选择是否同意',trigger:'blur'
           }
         ]
      },
      formSmall:{
        link:'',
        order_id:'',
        code:'',
        // desc:'示例：同意***',
        desc:'',
        // description:'示例：提前请假***天，实际请假***天',
        description: '',
        holidaytype_name:'',
        leavetimes:[
          {
            start_date:'',
            start_time:'',
            end_date:'',
            end_time:''
          }
        ],
        images:[]
      },
      rulesSmall:{
        code:[
          {
            required:true,message:'请选择是否同意',trigger:'blur'
          }
        ],
        description: [
          {
            required:true,message:'请输入销假说明',trigger:'blur'
          }
        ],
        holidaytype:[
          {
            required:true,message:'请选择请假类型',trigger:'blur'
          }
        ],
        leavetimes: [
          {
            required:true,message:'请添加至少一条请假记录',trigger:'blur'
          }
        ]
      },
      tableData:[],
      obj:{},
      holidayTypeList:[]
    }
  },
  created() {
    holidayType({}).then(res =>{
      if(res.code === '1'){
        let temp = []
        for(let i=0;i<res.data.length;i++){
          temp.push(res.data[i].name)
        }
        this.holidayTypeList = temp
      }
    })
    this.init()
  },
  mounted() {

  },
  methods: {
    init(){
      this.getList()
    },
    classObjectProcedure(link){
      if(link===2) {
        return 'orange'
      }else if(link===3){
        return 'brown'
      }else if(link===4){
        return 'red'
      }else if(link===5){
        return 'blue'
      }else if(link===6){
        return 'purple'
      }else{
        return 'green'
      }
    },
    transformProcedure(val){
      let list = [
        {
          id:1,
          label:'发起请假申请',
          value:1
        },
        {
          id:2,
          label:'部门正职审批',
          value:2
        },
        {
          id:3,
          label:'分管领导审批',
          value:3
        },
        {
          id:4,
          label:'总经理审批',
          value:4
        },
        {
          id:5,
          label:'销假审核',
          value:5
        },
        {
          id:6,
          label:'归档',
          value:6
        }
      ]
      return list.filter(ele=>(ele.value === val))[0].label
    },
    link(link){
      switch (link){
        case 1:
          return '发起请假申请'
          // eslint-disable-next-line no-unreachable
          break;
        case 2:
          return '部门正职审批'
          // eslint-disable-next-line no-unreachable
          break;
        case 3:
          return '分管领导审批'
          // eslint-disable-next-line no-unreachable
          break;
        case 4:
          return '总经理审批'
          // eslint-disable-next-line no-unreachable
          break;
        case 5:
          return '销假审核'
          // eslint-disable-next-line no-unreachable
          break;
        case 6:
          return '归档'
          // eslint-disable-next-line no-unreachable
          break;
        default:
          return '环节错误'
      }
    },
    typeSelect(type){
      switch (type){
        case '年休假':
          return 'success'
          // eslint-disable-next-line no-unreachable
          break;
        case '婚假':
          return 'danger'
          // eslint-disable-next-line no-unreachable
          break;
        case '产假':
          return 'warning'
          // eslint-disable-next-line no-unreachable
          break;
        case '病假':
          return 'info'
          // eslint-disable-next-line no-unreachable
          break;
        case '事假':
          return 'info'
          // eslint-disable-next-line no-unreachable
          break;
        default:
          return 'success'
      }
    },
    getList(){
      let params = {
        page_number:this.pagination.currentPage,
        page_size:this.pagination.pageSize
      }
      todoList(params).then(res=>{
        if(res.code==='1'){
          this.$message.success(res.message)
          this.tableData = res.data
          this.pagination.total = res.total_count
          this.pagination.currentPage = res.page_number
          this.pagination.pageSize = res.page_size
        }else{
          this.$message.error(res.message)
        }
      })
    },
    handleDialogClose(done){
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            this.cancel()
            this.obj = {}
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            this.srcList = []
            this.imageList = []
            this.data_order = []
            this.tableDataDetail = []
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    handleCloseSmall(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            this.formSmall = {
              desc:'示例：同意***',
              description:'示例：提前请假***天，实际请假***天',
              leavetimes:[
                {
                  start_date:'',
                  start_time:'',
                  end_date:'',
                  end_time:''
                }
              ],
            }
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    detail(id){
      this.drawer = true
      let  params = {
        holiday_id:id
      }
      holidayInfo(params).then(res=>{
        if(res.code === '1'){
          this.$message.success(res.message)
          this.tableDataDetail = res.holiday
          this.data_order = res.orders
          this.imageList = res.images
          this.formSmall.leavetimes[0].start_date = res.holiday[0].start_date
          this.formSmall.leavetimes[0].start_time = res.holiday[0].start_time
          this.formSmall.leavetimes[0].end_date = res.holiday[0].end_date
          this.formSmall.leavetimes[0].end_time = res.holiday[0].end_time
          for(let i= 0;i<this.imageList.length;i++){
            this.srcList.push(this.base+'/tyjq/api/media/'+this.imageList[i].image)
          }
        }else{
          this.$message.error(res.message)
        }
      })
    },
    check(obj){
      this.obj = obj
      console.log('obj',this.obj)
      if(this.obj.link === 1||this.obj.link ===2||this.obj.link ===3||this.obj.link ===4){
        this.dialogFormVisible = true
      }else{
        this.formSmall.holidaytype_name = this.tableDataDetail[0].holidaytype__name
        this.drawerSmall = true

      }

    },
    cancel(){
      this.form = {}
    },
    cancelNew(){
      this.formSmall = {}
      this.formSmall.holidaytype_name = this.tableDataDetail[0].holidaytype__name
      this.formSmall.leavetimes =[
        {
          start_date:'',
          start_time:'',
          end_date:'',
          end_time:''
        }
      ]
      console.log(this.formSmall)
    },
    onSubmit(){
       if(this.obj.link !== 5){
           this.$refs.form.validate(valid=>{
             if(valid){
               this.loading = true
               this.form.link = this.obj.link
               this.form.order_id = this.obj.id
               console.log('this.form',this.form)
               auditOrder(this.form).then(res=>{
                 console.log('res',res)
                 if(res.code === '1'){
                   this.loading = false
                   this.$message.success(res.message)
                   this.dialogFormVisible = false
                   this.cancel()
                   this.obj = {}
                   this.form = {}
                   this.drawer = false
                   this.getList()
                 }else{
                   this.$message.error(res.message)
                 }
               })
             }
           })
       }else if(this.obj.link === 5){
         console.log(this.formSmall)
         let temp = []
         temp = this.removeEmptyValues(this.formSmall.leavetimes)
         console.log(temp)
         console.log('judge',temp.length)
         console.log(this.formSmall.leavetimes)
         if(temp.length===1 && !this.judgeEmpty(this.formSmall.leavetimes)){
           this.$message.error('请至少上传一条完整请假记录！')
         }else if(temp.length > 1 && !this.judgeEmpty(this.formSmall.leavetimes)){
           this.$message.warning('请将第一条请假记录补充完整！')
         }else{
           console.log(this.formSmall.leavetimes)
           this.$refs.formSmall.validate(valid=>{
             if(valid){
               this.loading = true
               this.formSmall.link = this.obj.link
               this.formSmall.order_id = this.obj.id
               console.log('this.formSmall',this.formSmall)
               console.log('表单验证通过')
               auditOrder(this.formSmall).then(res=>{
                 console.log('res',res)
                 if(res.code === '1'){
                   this.loading = false
                   this.$message.success(res.message)
                   this.drawerSmall = false
                   this.cancelNew()
                   this.obj = {}
                   this.form = {}
                   this.drawer = false
                   this.getList()
                 }else{
                   this.$message.error(res.message)
                 }
               })
             }
           })
         }
      }else{
        this.$message.error('环节错误，已归档或其他错误!')
        console.log('环节错误，已归档或其他错误')
      }
    },
    removeEmptyValues(arr){ //从索引为1开始 注意每次删除过一个元素以后 arr的长度也在跟着变 递归判断
      for(let key=1;key<arr.length;key++){
        if(arr[key] === null || arr[key] === undefined){
          arr.splice(key,1)
          this.removeEmptyValues(arr)
        }else if(typeof arr[key] ==='object' && ((Object.keys(arr[key]).length === 0 )|| (Object.values(arr[key]).includes(''))||(Object.values(arr[key]).includes(null)))){
          arr.splice(key,1)
          this.removeEmptyValues(arr)
        }
      }
      return arr;
    },
    judgeEmpty(obj){  //判断第一条有空值
       for(let i=0;i<Object.values(obj[0]).length;i++){
         if(Object.values(obj[0])[i] === ''||Object.values(obj[0])[i] === null){
           return false
         }
       }
       return true
    },
    addRow(index, rows) {
      var addObj = {
        start_date:'',
        start_time:'',
        end_date:'',
        end_time:''
      };
      rows.push(addObj);
      console.log(rows.length)
      setTimeout(() => {
        this.$refs.leavetimes.setCurrentRow(addObj);
      }, 10);
      console.log(this.formSmall.leavetimes)
    },
    handleDeleteRow(index,rows){
      if(index!==0){
        rows.splice(index, 1);
        console.log(this.formSmall.leavetimes)
      }else{
        this.$message.error('不允许删除，至少添加一条记录！')
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleSizeChange(pageSize){
      this.pagination.pageSize = pageSize
      this.getList()
    },
    handleCurrentChangePagination(currentPage){
      this.pagination.currentPage = currentPage
      this.getList()
    },
    handleFileChange(file,fileList){
      this.uploadDisabled=(fileList.length>=3)
      this.fileList = fileList
      console.log(file,fileList)
      console.log(this.fileList)
      console.log('imgs',this.imgs)
      const imgType = file.raw.type === 'image/jpeg'|| file.raw.type === 'image/png'
      const isLt2MB = file.size / 1024 / 1024 < 2;
      if (!imgType) {
        this.$message.error("上传图片只能是 JPG和png 格式!");
        this.uploadDisabled=(fileList.length>=3)
        console.log(fileList)
        return false
      }
      if(!file.raw){
        this.$message.error("选择图片错误！")
      }
      if (!isLt2MB) {
        this.uploading=true
        this.$message.success("图片大小超过2MB，正在压缩中...");
        setTimeout(() => {
          //代码
          this.uploading=false
        }, 2000);
        let that = this;
        let reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file.raw);
        reader.onloadend = function () {
          let result = this.result;
          console.log(result)
          let img = new Image();
          img.src = result;
          // compressImg.src = file.url;
          console.log(img.src)
          img.onload = function (){
            let maxWidth = 800;
            let maxHeight = 800;
            let originWidth = img.width; //图片原始宽
            let originHeight = img.height; //图片原始高
            // console.log(originWidth)
            // console.log(originHeight)
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d')
            // 目标尺寸
            let targetWidth = originWidth;
            let targetHeight = originHeight;
            if (originWidth > maxWidth || originHeight > maxHeight) {
              if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更宽，按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
              } else {
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
              }
            }
            canvas.width = targetWidth
            canvas.height = targetHeight
            // 图片压缩
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
            // canvas对图片进行缩放 0.3是我定义的图片质量，
            let base64 = canvas.toDataURL(file.raw.type, 0.3);
            console.log(base64)
            //将base64转换为file流
            let Compressfile= that.convertBase64UrlToFile({
              dataURL: base64,
              type: file.raw.type,
              contentName: file.name
            })
            console.log('压缩后', Compressfile)
            file = {
              id: "compress",//标记图片的唯一性，可按自己方式定义
              url:Compressfile.path,
              file: Compressfile
            };
            setTimeout(function(){
              that.$message.success('已压缩至2MB以下')
            },2000)
            that.formSmall.images=[...that.formSmall.images,base64]
            console.log(result.length) //result是返回图片base64格式
            console.log(that.formSmall.images.length)
            console.log(img.width)
            console.log(img.height)
            console.log(Compressfile)
            console.log(file,fileList)
            console.log(that.formSmall.images)
            console.log(that.formSmall.images[0])
            console.log(that.formSmall.images[1])
            console.log(that.formSmall.images[2])
            console.log(that.formSmall.images[3])
            console.log(that.formSmall.images[4])
            console.log(that.formSmall.images[5])
          }
        }
      } else {
        //这里写直接上传 转base64
        const self = this;
        let reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function (e) {
          let img_base64 = e.target.result;
          self.formSmall.images = [...self.formSmall.images,img_base64]
          console.log(self.formSmall.images)
        }
      }
    },
    convertBase64UrlToFile(base64) {
      let urlData = base64.dataURL
      let type = base64.type
      let contentName = base64.contentName
      let bytes = null
      if (urlData.split(',').length > 1) { //是否带前缀
        bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
      } else {
        bytes = window.atob(urlData)
      }
      // 处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length)
      let ia = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      let result = new Blob([ab], {
        type: type,
      })
      let result1 = new File([result], contentName, {
        type: type
      })
      result1.path = window.URL.createObjectURL(result)
      return result1
    },
    handleExceed() {
      this.$message.warning(`只能上传三张图片`);
    },
    beforeRemove(file,fileList) {
      this.index = fileList.indexOf(file)
      console.log('index',this.index)
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeAvatarUpload(file){
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.uploadDisabled=(fileList.length>=3)
      this.formSmall.images.splice(this.index,1)
      console.log( this.formSmall.images)
    },
    handlePreview(file) {
      console.log(file.size);
      // window.open(file.url)
      this.dialogImageUrl = file.url;
      this.dialogImgVisible = true;
      this.uploadDisabled = true
    }
  }
}
</script>
<style lang="scss">
.content-box{
  height: 95%;
  .drawerContainer {
      //text-align: center;
      color: #fff;
      padding: 10px;
      font-size: 25px;

      .head {
        .title {
          display: flex;
          width: 100%;
          font-weight: 600;
          font-size: 15px;
          line-height: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #e8e8e8;
          margin-bottom: 15px;

          .icon {
            width: 5px;
            height: 15px;
            background-color: rgb(146, 198, 222);
            margin-right: 5px;
          }
        }

        .containerBox {
          display: flex;
          justify-content: flex-start;
          //align-items: center;
          flex-wrap: wrap;
          margin-bottom: 16px;
          box-sizing: border-box;
          padding: 0 10px;

          .itemBox1 {
            width: 33.3%;
            margin-bottom: 15px;
            font-size: 14px;

            .itemLeft1 {
              color: rgba(0, 0, 0, 0.55);
            }

            .itemRight1 {
              color: rgba(0, 0, 0, 0.95);
            }
          }

          .itemBox {
            width: 33.3%;
            margin-bottom: 15px;
            font-size: 14px;

            .itemLeft {
              color: rgba(0, 0, 0, 0.55);
            }

            .itemRight {
              color: rgba(0, 0, 0, 0.95);
            }
          }
        }
      }
    }
  .body{
    margin-top: 0;
    position: relative;
    height: 100%;
    .block{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}

</style>
<style>
.demo-table-expand {
  /*font-size: 0;*/
  /*margin-left: 15em;*/
//width: 75%;
//margin: 0 12.5%;
  margin: 20px;
}
.demo-table-expand label {
  width: 11em;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
//padding: 1em;
  margin-right: 0;
  margin-bottom: 0;
}
.el-upload__tip{
  color:red;
}
</style>
